<!-- 模板 -->

<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">表单</div>
        <div class="layui-card-body">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">输入框</label>
              <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码框</label>
              <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">选择框</label>
              <div class="layui-input-block">
                <select name="city" lay-verify="required">
                  <option value=""></option>
                  <option value="0">北京</option>
                  <option value="1">上海</option>
                  <option value="2">广州</option>
                  <option value="3">深圳</option>
                  <option value="4">杭州</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">复选框</label>
              <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">开关</label>
              <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">单选框</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">文本域</label>
              <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn xxx" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 脚本 -->
<script>
  layui.use(['form'], function() {
    var form = layui.form,
      $ = layui.jquery;
    form.render();

    //监听提交
    form.on('submit(formDemo)', function(data) {
      console.log(data.field);
      $.post('/api/submitForm', data.field, function(res) {
        console.log(res);
        layer.msg(res.success ? res.msg : '提交失败.');
      }, 'json');
      return false;
    });
  });
</script>
<!-- 样式 -->
<style scoped>

</style>